<template>
  <view class="detail-container">
    <!-- 标题区域 -->
    <view class="header">
      <text class="title">{{ article.title }}</text>
      <view class="meta">
        <text class="time">{{ article.publishTime }}</text>
        <text class="views">阅读 {{ article.views }}</text>
      </view>
    </view>

    <!-- 正文内容 -->
    <view class="content">
      <rich-text :nodes="article.content"></rich-text>
    </view>

    <!-- 修改后的评论模块 -->
    <view class="comment-section">
      <!-- 新增评论标题 -->
      <view class="comment-title">
        <text class="title-text">精华评论</text>
        <text class="comment-count">（{{ comments.length }}条）</text>
      </view>

      <!-- 评论列表 -->
      <view class="comment-list">
        <view 
          v-for="(comment, index) in comments"
          :key="index"
          class="comment-item"
        >
          <view class="comment-header">
            <text class="comment-author">{{ comment.author }}</text>
            <text class="comment-time">{{ comment.commentTime }}</text>
          </view>
          <text class="comment-content">{{ comment.commentContent }}</text>
        </view>
      </view>

      <!-- 固定在底部的评论输入框 -->
      <view class="comment-input-footer">
        <button class="btn consult" v-show="article.category==7" @click="navigateToConsult">联系咨询</button>
        <input 
          v-show="article.category!=7"
          v-model="newComment.content"
          placeholder="写下你的评论..."
          class="footer-input"
          @confirm="submitComment"
        />
        <button 
          v-show="article.category!=7"
          @click="submitComment"
          class="footer-btn"
        >发送</button>
      </view>
    </view>
  </view>
</template>

<script>
import {  getNewsDetail,getNewsCommentPages,saveNewsComment } from '@/api/news'
export default {
  data() {
    return {
      id:"",
      article: {
        title: '关于工业4.0转型的指导意见',
        publishTime: '2024-03-15',
        views: 2356,
        content: `
          <div style="padding:20rpx;">
            <p style="text-indent:2em;">根据最新产业政策要求，企业需在以下方面进行智能化改造...</p>
            <p style="text-indent:2em;">1. 生产线自动化升级标准<br/>2. 数据采集系统部署规范<br/>3. 物联网设备接入指南</p>
            <p style="color:#666;margin-top:30rpx;">* 本文件自发布之日起生效</p>
          </div>
        `
      },
      newComment: {
        author: "匿名用户",
        content: "",
        time: ""
      },
      comments: [
      ]
    }
  },
  async onLoad(options) {
    this.id = options.id;
    try {
      // 获取新闻分类列表
      const res = await getNewsDetail(this.id)
      if(res){
        this.article = res;
      }
    } catch (error) {
      console.error('获取新闻失败', error)
    }
    try {
      let param = {
        id:this.id,
        pageNum:1,
        count:20
      }
      // 获取新闻评论列表
      const res = await getNewsCommentPages(param)
      if(res.list){
        this.comments = res.list;
      }
    } catch (error) {
      console.error('获取新闻评论列表', error)
    }
  },
  methods: {
    async submitComment() {
      if (this.newComment.content.trim()) {

          // this.comments.unshift({
          //   ...this.newComment,
          //   time: new Date().toLocaleString()
          // });
          let param = {
            newsId:this.id,
            commentContent:this.newComment.content,
            parentId:0,

          }
          const res =await saveNewsComment(param)
          if(res){
            // console.log("res==",res)
            this.comments.push()
            uni.showToast({ title: '评论成功', icon: 'success' })
            // 重新获取评论列表
            let param = {
              id: this.id,
              pageNum: 1,
              count: 20
            }
            const res = await getNewsCommentPages(param); // 添加 await
            if (res.list) {
              this.comments = res.list;
            }
          }
          this.newComment.content = "";
      }else{
        uni.showToast({ title: '请输入评论内容', icon: 'none' })
      }
    },
    navigateToConsult() {
      uni.navigateTo({
        url: "/pages/contact/index",
      });
    },
  }
}
</script>

<style>
.detail-container {
  padding: 30rpx;
  background: #fff;
  min-height: 100vh;
}

.header {
  border-bottom: 1rpx solid #eee;
  padding-bottom: 30rpx;
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  color: #333;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 20rpx;
  display: block;
}

.meta {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.time, .views {
  font-size: 26rpx;
  color: #999;
}

.content {
  line-height: 1.8;
  font-size: 30rpx;
  color: #333;
}

.content p {
  margin-bottom: 40rpx;
}

/* 删除以下样式 */
.comment-form,
.comment-input,
.submit-btn {
  /* 清除关联样式 */
}

/* 保留其他样式 */
.comment-list {
  padding-bottom: 120rpx;
}

.comment-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.comment-author {
  font-weight: bold;
  color: #333;
  font-size: 28rpx;
}

.comment-time {
  color: #999;
  font-size: 24rpx;
}

.comment-content {
  color: #666;
  font-size: 28rpx;
  line-height: 1.6;
}

/* 新增底部输入框样式 */
.comment-input-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.footer-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.footer-btn {
  background: #007AFF;
  color: white;
  padding: 0 40rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.btn.consult {
  width: 40%;
  background: #007AFF;
  color: white;
  border-radius: 12rpx;  /* 调整为直角矩形 */
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  transition: all 0.3s;
}
/* 调整评论列表间距 */
.comment-list {
  padding-bottom: 120rpx; /* 为底部输入框留出空间 */
}

/* 新增评论标题样式 */
.comment-title {
  margin: 40rpx 0;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.title-text {
  font-size: 34rpx;
  color: #333;
  font-weight: 600;
}

.comment-count {
  font-size: 26rpx;
  color: #999;
  margin-left: 15rpx;
}
</style>